<template>
  <div class="divider">
    <div class="content-container">
      <div class="content">{{text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FormDivider",
  props: {
    text: {
      type: String,
      required: true
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "@/styles/variables.scss";
  .divider {
    width: 100%;
    .content-container {
      .content {
        font-weight: bold;
        font-size: 16px;
        border-left: 3px solid $dividercolor;
        padding-left: 10px;
        margin-bottom: 8px;
      }
      border-bottom: 2px solid $dividercolor;
    }
  }
</style>
